@import "./variables";

//  全局样式
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  box-sizing: border-box;
  outline: none;
}

html {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2em;
  background-color: #f1f1f1;
  margin: 0;
  padding: 0;
}

a {
  color: #343440;
  text-decoration: none;
}

.clearfix {
  &::after {
    content: "";
    display: table;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
  }
}

//浮动
.float-r {
  float: right;
}

//浮动
.float-l {
  float: left;
}

// 字体加粗
.fw-b {
  font-weight: bold;
}

//文章一行显示，多余省略号显示
.title-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bg-color-black {
  background-color: rgba(19, 25, 47, 0.6);
}

.bg-color-blue {
  background-color: #1a5cd7;
}

.colorBlack {
  color: #272727 !important;

  &:hover {
    color: #272727 !important;
  }
}

.colorGrass {
  color: #33cea0;

  &:hover {
    color: #33cea0 !important;
  }
}

.colorRed {
  color: #ff5722;

  &:hover {
    color: #ff5722 !important;
  }
}

.colorText {
  color: #d3d6dd !important;

  &:hover {
    color: #d3d6dd !important;
  }
}

.colorBlue {
  color: #257dff !important;

  &:hover {
    color: #257dff !important;
  }
}

//颜色
@each $colorkey,
$color in $colors {
  .text-#{$colorkey} {
    color: $color;
  }

  .bg-#{$colorkey} {
    background-color: $color;
  }
}

.tixing {
  position: relative;
  /* *  */
  display: inline-block;
  /* z-index:1; */
}

.tixing::before {
  content: ' ';
  /* *  */
  position: absolute;
  /* *  */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-bottom: none;
  transform: perspective(.5rem) rotateX(5deg);
  /* *  */
  transform-origin: bottom;
  background: linear-gradient(to top, #2F88DD 0%, #0C3A88 30%, #02135B 70%, #3289D9 100%);
}

.dtixing {
  position: relative;
  /* *  */
  display: inline-block;
  /* z-index:1; */
}

.dtixing::before {
  content: ' ';
  /* *  */
  position: absolute;
  /* *  */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-bottom: none;
  transform: perspective(.55rem) rotateX(-5deg);
  /* *  */
  transform-origin: top;
  background: linear-gradient(to top, #2983DB 0%, #0C3A88 30%, #02135B 70%, #3289D9 100%);
}

.sibian {
  background: linear-gradient(to right, #3587DA 0%, #01135B 30%, #02135B 70%, #3485D7 100%);
  opacity: 0.5;
  height: 0.29rem;
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    color: #FFF;
    font-size: 0.2rem;
  }
}

.flex {
  display: flex;
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0.12rem;
  height: 0.17rem;
  /*高宽分别对应横竖滚动条的尺寸*/

}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 0.1rem;
  background: #FFF;
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 0.1rem;
  background: #0B3C77;

}
.el-select-dropdown__item {
  color: #55CDEE;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background: linear-gradient(to right, #3587DA 0%,  #02125C 70%, #3485D7 100%);
  background-color: #F5F7FA;
}
.el-select-dropdown {
  position: absolute;
  z-index: 1001;
  border: 1px solid #044F7D;
  border-radius: 4px;
  background-color: #03226D !important;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 5px 0;
}
.el-dialog {
  background: #01135B;
  width: 65%;
  .el-dialog__header {
    margin-bottom: 0.2rem;
    padding: 20px 20px 10px;
    text-align: center;
    background: linear-gradient(to bottom, #3587DA 0%, #02125C 30%, #02125C 70%, #3485D7 100%);

    .el-dialog__title {
      line-height: .2rem;
      font-size: .43rem;
      color: #6CEBF1;
    }

    .el-dialog__headerbtn {
      position: absolute;
      top: 0;
      right: 20px;
      padding: 0;
      background: 0 0;
      border: none;
      outline: 0;
      cursor: pointer;
      font-size: 0.2rem;
    }

    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-size: 0.63rem;
    }


  }
}


  .el-dialog__body {
    padding: 0px 0px !important;
    width: 98%;
    margin: auto;
    .dialog_input {

  .el-input__inner {
    background: #03113D !important;
    color: #54CBE7;
    height: 0.47rem;
    font-size: 0.26rem;
    line-height: 0.67rem;
    border: 1px solid #0B2868;
  }
  .el-pagination button, .el-pagination span:not{
    font-size: 0.26rem;
  }
  .el-button--info {
    color: #54CBE7;
    background-color: #03113D;
    /* border-color: #909399; */
    width: 2rem;
    height: 0.47rem;
    font-size: 0.32rem;
    border: 1px solid #0B2868;
    line-height: 0.1rem;
    background: #03113D;
  }
  .tableBox{
    height: auto;
    width: 100%;
    overflow-y: auto;
    .el-table--fit{
      background: #0B2E74 !important;
    }
    .el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: #03113D;
  }
  .el-table--enable-row-hover .el-table__body tr >td {
    background-color: #03113D;
}
    .el-table{
      .el-table--scrollable-x .el-table__body-wrapper {
        overflow-x: auto;
        background: #0B2E74 !important;
    }
    .el-table__empty-text {
      line-height: 60px;
      width: 50%;
      color: #fff;
  }
    }
    .el-table__empty-block{
      background: #0B2E74 !important;
    }
  
    .el-table th, .el-table tr {
    background: linear-gradient(to right, #3587DA 0%, #02125C 50%, #3485D7 100%);

  }
  .el-table td, .el-table th.is-leaf {
     border-bottom: 2px solid #01135B;
}
  .el-table .cell {
    color: #54CBE7;
    font-size: 0.25rem;
}
  .el-table th>.cell {
    color: #54CBE7;
    font-size: 0.25rem;
}
.el-pagination{
  padding: 0.3rem 0px;
}
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
  /* margin: 0 9px; */
  background-color: #070749;
  color: #fff;
  min-width: .8rem;
  font-size: 0.26rem;
  border-radius: 2px;
}
.el-pagination__sizes .el-input .el-input__inner {
  font-size: 0.2rem !important;
  padding-left: 8px;
}
.el-pagination__editor.el-input .el-input__inner {
  height: 28px;
  font-size: 0.2rem !important;
}
  
  }
}
  }

.ver-bottom {
  vertical-align: bottom;
}

.po-re {
  position: relative;
}

.flex_c {
  display: flex;
  align-items: center;
}

.flex_a {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex_b {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.point{
  cursor: pointer;
}

//对齐
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var !important;
  }
}

//flex
@each $key,
$value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value;
  }
}

@each $key,
$value in $flex-ai {
  .ai-#{$key} {
    align-items: $value;
  }
}

//字体
@each $fontkey,
$fontvalue in $font-sizes {
  .fs-#{$fontkey} {
    font-size: $fontvalue * $base-font-size;
  }
}

//.mt-1 => margin top
//spacing

@each $typekey,
$type in $spacing-types {

  //.m-1
  @each $sizekey,
  $size in $spacing-sizes {
    .#{$typekey}-#{$sizekey} {
      #{$type}: $size * $spacing-base-size;
    }
  }

  //.mx-1
  @each $sizekey,
  $size in $spacing-sizes {
    .#{$typekey}x-#{$sizekey} {
      #{$type}-left: $size * $spacing-base-size;
      #{$type}-right: $size * $spacing-base-size;
    }

    .#{$typekey}y-#{$sizekey} {
      #{$type}-top: $size * $spacing-base-size;
      #{$type}-bottom: $size * $spacing-base-size;
    }
  }

  //.mt-1
  @each $directionkey,
  $direction in $spacing-directions {

    @each $sizekey,
    $size in $spacing-sizes {
      .#{$typekey}#{$directionkey}-#{$sizekey} {
        #{$type}-#{$direction}: $size * $spacing-base-size;
      }
    }
  }

  .#{$typekey} {
    #{$type}: 0;
  }
}